<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
<title>灭霸手套动画</title>
</head>
<body>
<style>
*{margin:0;padding:0;}
</style>
<div style="color:#094;">一个页面可以new多个动画,互不干扰</div>
<div id="glo" style="position:absolute;left:20%;top:50%;"></div>
<div id="glo2" style="position:absolute;left:70%;top:50%;"></div>

<script>
function GloveThanos(ele, w, h, firstPic, secondPic, placeHolderPic, firstFn, secondFn, objTrigger) {
    if (ele.tagName.toLowerCase() !== 'div') {
        alert('请传入div标签');
        return
    }
    if (!w || !h) {
        alert('请传入单帧动画的宽和高');
        return
    }
    if (!firstPic || !secondPic) {
        alert('请传入2张图片');
        return
    }
    if (firstFn.constructor != Function || secondFn.constructor != Function) {
        alert('请传入2个函数');
        return
    }
    this.ele = ele
    this.singleFrameWidth = w//每一帧的宽度
    this.singleFrameHeight = h//每一帧的高度
    this.firstPic = firstPic
    this.secondPic = secondPic
    this.firstFn = firstFn
    this.secondFn = secondFn
    objTrigger = Object.prototype.toString.call(objTrigger) === '[object Object]' ? objTrigger : {}
    this.objTrigger = Object.assign({ autoUnLock: true, music: false }, objTrigger)

    this.__canPlay__ = true//点击防抖动

    var gloImg = document.createElement('img');
    gloImg.src = placeHolderPic
    var randInt = parseInt(Math.random() * 100000)
    this.placeholderId = 'placeholder_glove' + randInt
    gloImg.id = this.placeholderId
    gloImg.style.position = 'absolute';

    var gloCanvas = document.createElement('canvas');
    gloCanvas.width = this.singleFrameWidth
    gloCanvas.height = this.singleFrameHeight
    gloCanvas.style.position = 'absolute';

    this.ele.appendChild(gloImg)
    this.ele.appendChild(gloCanvas)

    this.ctx = gloCanvas.getContext('2d')

    if (this.objTrigger.music) {
        var o_music_snap = document.createElement('audio');
        o_music_snap.src = "thanos_snap_sound.mp3"
        o_music_snap.id = "o_music_snap"
        o_music_snap.preload = "auto"
        var o_music_reverse = document.createElement('audio');
        o_music_reverse.src = "thanos_reverse_sound.mp3"
        o_music_reverse.id = "o_music_reverse"
        o_music_reverse.preload = "auto"
        document.body.appendChild(o_music_snap)
        document.body.appendChild(o_music_reverse)
    }
    this.callback()
}

GloveThanos.prototype.canPlay = function () {
    this.__canPlay__ = true
}

GloveThanos.prototype.callback = function () {
    var that = this
    that.ele.addEventListener('click', function () {
        if (!that.__canPlay__) { return }
        that.__canPlay__ = false
        that.ele.classList.toggle("anim-status");
        if (that.ele.classList.contains('anim-status')) {
            document.getElementById('o_music_snap').play()
            that.snap(that.firstPic, that.firstFn)
        } else {
            document.getElementById('o_music_reverse').play()
            that.snap(that.secondPic, that.secondFn)
        }
    }, false)
}
GloveThanos.prototype.snap = function (picUrl, fn) {
    var that = this
    var timer
    var img = new Image();
    img.onload = function () {
        /*9个参数*/
        /*图片对象*/
        /*图片上定位的坐标  x y */
        /*在图片上截取多大的区域  w h*/
        /*绘制在画布上的坐标 x y*/
        /*是图片的大小  不是裁剪  是缩放*/
        document.getElementById(that.placeholderId).style.display = "none"
        var frameOffset = 0
        var imgWidth = img.width
        drwa()
        timer = setInterval(function () {
            drwa()
        }, 45)
        //一共48帧,谷歌用了2.2秒完成整个动画,所以2.2/48=0.0458秒/帧,即45毫秒/帧
        function drwa() {
            if (frameOffset > imgWidth - that.singleFrameWidth) {
                clearInterval(timer)
                fn && fn();
                if (that.objTrigger.autoUnLock) {
                    that.canPlay()
                }
                return
            }
            that.ctx.clearRect(0, 0, that.singleFrameWidth, that.singleFrameWidth);
            that.ctx.drawImage(img, frameOffset, 0, that.singleFrameWidth, that.singleFrameHeight, 0, 0, that.singleFrameWidth, that.singleFrameHeight);
            frameOffset += that.singleFrameWidth
        }
    }
    img.src = picUrl
}

/*
    * 举例:左边的手套
*/
var glo = document.getElementById('glo')

new GloveThanos(glo, 80, 80, 'thanos_snap.png', 'thanos_reverse.png', 'thanos_idle.png', function () {
    var d = document.createElement('div')
    d.innerHTML = '左边手套第1个动画完成'
    document.body.appendChild(d)
}, function () {
    var d = document.createElement('div')
    d.innerHTML = '左边手套第2个动画完成'
    document.body.appendChild(d)
}, { music: true })



/*
    * 举例:右边的手套,多了一个可选参数{ autoUnLock: false }
*/
var glo2 = document.getElementById('glo2')

var glo2 = new GloveThanos(glo2, 80, 80, 'thanos_snap.png', 'thanos_reverse.png', 'thanos_idle.png', function () {
    var d = document.createElement('div')
    d.innerHTML = '右边手套第1个动画完成,因为设置了{ autoUnLock: false },所以设置了5秒后执行```实例对象.canPlay()```解锁点击事件执行动画'
    document.body.appendChild(d)
    setTimeout(function () {
        glo2.canPlay()
    }, 5000)
}, function () {
    var d = document.createElement('div')
    d.innerHTML = '右边手套第2个动画完成,因为回调函数中没有```实例对象.canPlay()```,所以无论怎么点击永远不会执行了'
    document.body.appendChild(d)
}, { autoUnLock: false })
</script>
</body>
</html>
